package com.example.composestudy.part7

import androidx.compose.animation.Crossfade
import androidx.compose.animation.animateContentSize
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Preview(showBackground = true)
@Composable
fun EasyAnimation2() {
    var expand by remember { mutableStateOf(false) }
    Column(modifier = Modifier.wrapContentHeight()
        .padding(10.dp)) {
        Text(
            text = "关于混合模式，有多达十几种，在展示下文代码前，我们需要先达成一个共识，这个混合模式，" +
                    "是两个图片相交区域的混合模式，如果不相交，那么混合模式根本不会生效。\n" +
                    "\n" +
                    "所以这就决定了你绘制图片和绘制形状时，图形位置不同就可能会出现奇怪的混合结果。\n" +
                    "\n" +
                    "下文的代码我们会分别绘制大小相同的png图片（如下图所示）以及绘制形状来展示其区别。\n" +
                    "————————————————",
            fontSize = 16.sp,
            textAlign = TextAlign.Justify,
            modifier = Modifier.animateContentSize(),
            overflow = TextOverflow.Ellipsis,
            maxLines = if (expand) Int.MAX_VALUE else 2,
        )
        Text(
            text = if (expand) "收起" else "全文",
            color = Color.Blue,
            modifier = Modifier.padding(10.dp)
                .clickable { expand = !expand },
        )
    }
}